<template>
  <div id="theaterPage">
    <el-space>
      <h2>影院列表：</h2>
    </el-space>
    <el-card v-for="data in dataList" :key="data.id" class="custom-card">
      <el-row class="grid-demo" style="margin-bottom: 16px">
        <el-col :span="12" class="content-wrapper">
          <h2>{{ data.theaterName }}</h2>
          <p>影院地址：{{ data.theaterAddress }}</p>
        </el-col>
        <el-col :span="12">
          <el-button
            type="primary"
            class="buy-button"
            @click="seeTheater(data)"
          >
            购票
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-pagination
      :page-size="searchParams.pageSize"
      :current-page="searchParams.current"
      @size-change="onPageChange"
      @current-change="onPageChange"
      layout="prev, pager, next"
      :page-count="pageCount"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, onMounted, ref, watchEffect, withDefaults } from "vue";

import API from "@/api";
import {
  getMovieVoByIdUsingGet,
  listMovieVoByPageUsingPost,
} from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { listTheaterVoByPageUsingPost } from "@/api/theaterController";
import TheaterVO = API.TheaterVO;
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 3,
};

const searchParams = ref<API.TheaterQueryRequest>({
  ...initSearchParams,
});
const dataList = ref<API.TheaterVO[]>([]);
const pageCount = ref<number>(5);
const movieId = ref<number>(0);

/**
 * 加载数据
 */
const loadData = async () => {
  const params = {
    ...searchParams.value,
  };
  const res = await listTheaterVoByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    pageCount.value = Math.ceil(
      (res.data.data?.total as number) / searchParams?.value?.pageSize ?? 5
    );
  } else {
    ElMessage({
      message: "登录失败," + res.data.message,
      type: "error",
    });
  }
};
onMounted(() => {
  loadMovie();
});
const loadMovie = async () => {
  const res = await listMovieVoByPageUsingPost(searchParams.value);
  if (res.data.code === 0) {
    movieId.value = res.data?.data?.records?.[0].id as number;
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

watchEffect(() => {
  loadData();
});

const seeTheater = (data: TheaterVO) => {
  router.push(`/theater/detail/${data.id}/${movieId.value}`);
};
</script>

<style scoped>
#theaterPage {
}

#theaterPage .content-wrapper > p {
  margin-bottom: 24px;
}

.custom-card {
  position: relative;
}

.buy-button {
  position: absolute;
  right: 16px;
  bottom: 16px;
}
</style>
